<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并</title>
		<style>/* 以最大距离为准 */
			div# parent{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 上框 加外边距 */
				margin-bottom: 40px;
			}
			div# son{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 下框 加外边距 */
				margin-top: 100px;
			}
			/* --------外边距垂直合并问题：建议：加横向，不要加纵向
			                             方案：去掉一个最小值，加内边距
			 --------------*/
			 div#parent{
				 width: 300px;
				 height: 300px;
				 /* 边框：有内部空间--子元素加外边距*/
				 b order: 1px solid red;
				 background-color: #aaffff; 
				 /* 上外边距 40px*/
				 margin-top: 50px;
				 /* ①添加溢出隐藏或者auto */
				 ove rflow: auto;
				 /* ②border:1像素透明边框 */
				 border: 1px solid transparent;
			 }
			 div#son{
				 width: 100px;
				 height: 100px;
				 background-color: #00ff00;
				 /* 上外边距 100px*/
				 margin-top: 100px;
			 }
			 /* --[内部垂直合并：以最大值为主]--需要填充 
			 解决方法：①找到父元素，添加 overflow:hidden[创建块级上下文，阻止外边距合并]
			          ②找到父元素，添加 border或者 padding-方向,建议：透明border
			 */
		</style>
	</head>
	<body>
		<div id="parent">
		<div id="son"></div>
		</div>
	</body>
</html>